<template>
  <div>
      <div class="column">
          <div class="map">
              <h3>
                  <span class="icon-cube">
                      设备数据统计
                  </span>
              </h3>
              <div class="chart">
                <div class="geo" ref="geo" @georoam='tuo()'></div>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import china from '../../assets/chinaMap/china.json'
export default {
    async mounted(){
        // let chinaMap = china // 中国地图 
        // // 注册中国地图
        // this.$echarts.registerMap('china', chinaMap)
        // let chart = this.$echarts.init(document.querySelector('.geo'))
        // let points = [
        //     { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }
        //     , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }
        //     , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }
        //     , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }
        //     , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }
        //     , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }
        //     , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }
        //     , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }
        //     , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }
        //     , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }
        //     , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }
        //     , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }
        //     , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }
        //     , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }
        //     , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }
        //     , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }
        //     , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }
        //     , { value: [119.4543, 25.9222] }
        // ]
        // let option = {
        //     backgroundColor: '',
        //     // geo: {
        //     //     map: 'china',
        //     //     aspectScale: 0.75, //长宽比
        //     //     zoom: 1.2,
        //     //     itemStyle: {
        //     //         normal: {
        //     //             areaColor: 'rgba(27, 73, 135, 0.8)',
        //     //             borderColor: 'rgba(58, 128, 177, 0.9)',
        //     //         },
        //     //         emphasis: {
        //     //             borderWidth: 1,
        //     //             color: 'rgba(1,1,1,0.2)',
        //     //             label: {
        //     //                 show: false,
        //     //                 color:'#eee'
        //     //             }
        //     //         }
        //     //     },
        //     //     regions: [{
        //     //         name: '南海诸岛',
        //     //         itemStyle: {
        //     //             areaColor: 'rgba(0, 10, 52, 1)',

        //     //             borderColor: 'rgba(0, 10, 52, 1)',
        //     //             normal: {
        //     //                 opacity: 0,
        //     //                 label: {
        //     //                     show: false,
        //     //                     color: "#009cc9",
        //     //                 }
        //     //             }
        //     //         },
        //     //     }],
        //     // },
        //      geo: {
        //         map: 'china',
        //         aspectScale: 0.75, //长宽比
        //         zoom: 1.2,
        //         roam: false,
        //         itemStyle: {
        //             normal: {
        //                 areaColor: "",
        //             },
        //             emphasis: {
        //                 // areaColor: '#031525',
        //                 borderWidth: 0,
        //                 color: 'green',
        //                 label: {
        //                     show: false
        //                 }
        //             }
        //         },
        //         regions: [{
        //             name: '南海诸岛',
        //             itemStyle: {
        //                 areaColor: 'rgba(0, 10, 52, 1)',

        //                 borderColor: 'rgba(0, 10, 52, 1)',
        //                 normal: {
        //                     opacity: 0,
        //                     label: {
        //                         show: false,
        //                         color: "#009cc9",
        //                     }
        //                 }
        //             },


        //         }],
        //     },
        //     series: [
        //         {
        //             type: 'map',
        //             roam: true,
        //             map: 'china',
        //             aspectScale: 0.75, //长宽比
        //             zoom: 1.2,
        //             label: {
        //                 normal: {
        //                     show: true,
        //                     textStyle: {
        //                         color: '#1DE9B6'
        //                     }
        //                 },
        //                 emphasis: {
        //                     textStyle: {
        //                         color: 'rgb(183,185,14)'
        //                     }
        //                 }
        //             },

        //             itemStyle: {
        //                 normal: {
        //                     borderColor: 'rgb(147, 235, 248)',
        //                     borderWidth: 1,
        //                     areaColor: "#031525",
        //                 },
        //                 emphasis: {
        //                     areaColor: "#2B91B7",
        //                     borderWidth: 0.1
        //                 }
        //             },
                    
        //         }, 
        //         {
        //             type: 'effectScatter',
        //             coordinateSystem: 'geo',
        //             showEffectOn: 'render',
        //             zlevel: 1,
        //             rippleEffect: {
        //                 period: 15,
        //                 scale: 5,
        //                 brushType: 'stroke'
        //             },
        //             // hoverAnimation: true,
        //             selectedMode:true,
        //             label: {
        //                 formatter: '{b}',
        //                 position: 'right',
        //                 offset: [15, 0],
        //                 color: '#1DE9B6',
        //                 show: true
        //             },
        //             itemStyle: {
        //                 color: '#1DE9B6',
        //                 shadowBlur: 10,
        //                 shadowColor: '#333'
        //             },
        //             symbolSize: 7,
        //             data: points
        //         }, 
        //         //地图线的动画效果
        //         {
        //             type: 'lines',
        //             zlevel: 2,
        //             effect: {
        //                 show: true,
        //                 period: 5, //箭头指向速度，值越小速度越快
        //                 trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
        //                 symbol: 'arrow', //箭头图标
        //                 symbolSize: 5, //图标大小
        //             },
        //             lineStyle: {
        //                 color: '#1DE9B6',
        //                 width: 3, //线条宽度
        //                 opacity: 0.01, //尾迹线条透明度
        //                 curveness: .6 //尾迹线条曲直度
        //             },
        //             data: [
        //                 { coords: [[118.8062, 31.9208], [103.9526, 30.7617]], lineStyle: { color: '#4ab2e5' } }
        //                 , { coords: [[127.9688, 45.368], [103.9526, 30.7617]], lineStyle: { color: '#4fb6d2' } }
        //                 , { coords: [[110.3467, 41.4899], [103.9526, 30.7617]], lineStyle: { color: '#52b9c7' } }
        //                 , { coords: [[125.8154, 44.2584], [103.9526, 30.7617]], lineStyle: { color: '#5abead' } }
        //                 , { coords: [[116.4551, 40.2539], [119.4543, 25.9222]], lineStyle: { color: '#f34e2b' } }
        //                 , { coords: [[123.1238, 42.1216], [119.4543, 25.9222]], lineStyle: { color: '#f56321' } }
        //                 , { coords: [[114.4995, 38.1006], [119.4543, 25.9222]], lineStyle: { color: '#f56f1c' } }
        //                 , { coords: [[117.4219, 39.4189], [119.4543, 25.9222]], lineStyle: { color: '#f58414' } }
        //                 , { coords: [[112.3352, 37.9413], [119.4543, 25.9222]], lineStyle: { color: '#f58f0e' } }
        //                 , { coords: [[109.1162, 34.2004], [119.4543, 25.9222]], lineStyle: { color: '#f5a305' } }
        //                 , { coords: [[103.5901, 36.3043], [119.4543, 25.9222]], lineStyle: { color: '#e7ab0b' } }
        //                 , { coords: [[106.3586, 38.1775], [119.4543, 25.9222]], lineStyle: { color: '#dfae10' } }
        //                 , { coords: [[101.4038, 36.8207], [119.4543, 25.9222]], lineStyle: { color: '#d5b314' } }
        //                 , { coords: [[103.9526, 30.7617], [119.4543, 25.9222]], lineStyle: { color: '#c1bb1f' } }
        //                 , { coords: [[108.384366, 30.439702], [119.4543, 25.9222]], lineStyle: { color: '#b9be23' } }
        //                 , { coords: [[113.0823, 28.2568], [119.4543, 25.9222]], lineStyle: { color: '#a6c62c' } }
        //                 , { coords: [[102.9199, 25.46639], [119.4543, 25.9222]], lineStyle: { color: '#96cc34' } }
        //             ]
        //         }
        //     ]
        // }

        
        
        // // 把数据和配置给实例对象
        // chart.setOption(option)
        // // 收缩窗口控制地图大小
        // window.addEventListener("resize", function () {
        //     chart.resize();
        // });
        // chart.on("georoam", (params) => {
        //     let option = this.chart.getOption(); //获得option对象
        //     if (params.zoom != null && params.zoom != undefined) {
        //         //捕捉到缩放时
        //         option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
        //         option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        //     } else {
        //         //捕捉到拖曳时
        //         option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
        //     }
        // });
            
            let mapCode = china
            this.$echarts.registerMap('china', mapCode);
            let chart = this.$echarts.init(this.$refs.geo)

            var points = [
                { value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }
                , { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }
                , { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }
                , { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }
                , { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }
                , { value: [123.1238, 42.1216], itemStyle: { color: '#f56321' } }
                , { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }
                , { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }
                , { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }
                , { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }
                , { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }
                , { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }
                , { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }
                , { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }
                , { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }
                , { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }
                , { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }
                , { value: [119.4543, 25.9222] }
            ]
            let option = {
                backgroundColor: '',
                geo: {
                    map: 'china',
                    aspectScale: 0.75, //长宽比
                    zoom: 1.2,
                    roam: true,
                    type: 'map',
                    zlevel:0,
                    label: {
                        show: true,
                        color: '#eee',
                        emphasis: {
                            color: '#fff'
                        }
                    },


                    itemStyle: {
                        borderColor: 'rgba(58, 128, 177, 0.9)',
                        borderWidth: 1,
                        areaColor: "rgba(27, 73, 135, 0.8)",
                        emphasis: {
                            areaColor: "rgba(0,0,0,0.1)",
                            borderWidth: 1,
                        },
                        select:{
                            disabled:false,
                            areaColor:'rgba(27, 73, 135, 0.8)'
                        }
                    },



                    // itemStyle: {
                    //     areaColor: "rgba(0,0,0,0)",
                    //     borderWidth:0,
                    //     emphasis: {
                    //         borderWidth: 0,
                    //         color: 'rgba(0,0,0,0)',
                    //         label: {
                    //             show: false
                    //         }
                    //     }
                    // },
                    // regions: [{
                    //     name: '南海诸岛',
                    //     itemStyle: {
                    //         areaColor: 'rgba(0, 10, 52, 1)',

                    //         borderColor: 'rgba(0, 10, 52, 1)',
                    //         opacity: 0,
                    //         label: {
                    //             show: false,
                    //             color: "#009cc9",
                    //         }
                    //     },

                    // }],
                },
                series: [
                    // {
                    // type: 'map',
                    // roam: true,
                    // zlevel:0,
                    // zoom: 1.2,
                    // map: 'china',
                    // label: {
                    //     show: true,
                    //     color: '#eee',
                    //     emphasis: {
                    //         color: '#fff'
                    //     }
                    // },
                    // itemStyle: {
                    //     borderColor: 'rgba(58, 128, 177, 0.9)',
                    //     borderWidth: 1,
                    //     areaColor: "rgba(27, 73, 135, 0.8)",
                    //     emphasis: {
                    //         areaColor: "rgba(0,0,0,0.1)",
                    //         borderWidth: 1,
                    //     },
                    //     select:{
                    //         disabled:false,
                    //         areaColor:'rgba(27, 73, 135, 0.8)'
                    //     }
                    // },
                    
                    // }, 
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'render',
                    zlevel: 1,
                    symbolSize: 9,
                    data: points,
                    rippleEffect: {
                        period: 15,
                        scale: 2,
                        brushType: 'stroke'
                    },
                }, 
                //地图线的动画效果
                {
                    type: 'lines',
                    zlevel: 2,
                    coordinateSystem:'geo',
                    effect: {
                        show: true,
                        period: 5, //箭头指向速度，值越小速度越快
                        trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: 6, //图标大小
                        animation:false,
                    },
                    lineStyle: {
                        color: '#1DE9B6',
                        width: 4, //线条宽度
                        opacity: 0.01, //尾迹线条透明度
                        curveness: 0.3 //尾迹线条曲直度
                    },
                    data: [
                        { coords: [[118.8062, 31.9208], [103.9526, 30.7617]], lineStyle: { color: '#4ab2e5' } }
                        , { coords: [[127.9688, 45.368], [103.9526, 30.7617]], lineStyle: { color: '#4fb6d2' } }
                        , { coords: [[110.3467, 41.4899], [103.9526, 30.7617]], lineStyle: { color: '#52b9c7' } }
                        , { coords: [[125.8154, 44.2584], [103.9526, 30.7617]], lineStyle: { color: '#5abead' } }
                        , { coords: [[116.4551, 40.2539], [119.4543, 25.9222]], lineStyle: { color: '#f34e2b' } }
                        , { coords: [[123.1238, 42.1216], [119.4543, 25.9222]], lineStyle: { color: '#f56321' } }
                        , { coords: [[114.4995, 38.1006], [119.4543, 25.9222]], lineStyle: { color: '#f56f1c' } }
                        , { coords: [[117.4219, 39.4189], [119.4543, 25.9222]], lineStyle: { color: '#f58414' } }
                        , { coords: [[112.3352, 37.9413], [119.4543, 25.9222]], lineStyle: { color: '#f58f0e' } }
                        , { coords: [[109.1162, 34.2004], [119.4543, 25.9222]], lineStyle: { color: '#f5a305' } }
                        , { coords: [[103.5901, 36.3043], [119.4543, 25.9222]], lineStyle: { color: '#e7ab0b' } }
                        , { coords: [[106.3586, 38.1775], [119.4543, 25.9222]], lineStyle: { color: '#dfae10' } }
                        , { coords: [[101.4038, 36.8207], [119.4543, 25.9222]], lineStyle: { color: '#d5b314' } }
                        , { coords: [[103.9526, 30.7617], [119.4543, 25.9222]], lineStyle: { color: '#c1bb1f' } }
                        , { coords: [[108.384366, 30.439702], [119.4543, 25.9222]], lineStyle: { color: '#b9be23' } }
                        , { coords: [[113.0823, 28.2568], [119.4543, 25.9222]], lineStyle: { color: '#a6c62c' } }
                        , { coords: [[102.9199, 25.46639], [119.4543, 25.9222]], lineStyle: { color: '#96cc34' } }
                    ]
                }
                ]
            };
            chart.setOption(option, true);
            // chart.on("georoam", (params) => {
            //     var option = chart.getOption(); //获得option对象
            //     if (params.zoom != null && params.zoom != undefined) {
            //         //捕捉到缩放时
            //         option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
            //         option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
            //     } else {
            //         //捕捉到拖曳时
            //         option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
            //     }
            //     chart.setOption(option); //设置option
            // });
    },
    data(){
        return{
        }
    }
}
</script>

<style scoped>
    .map{
        height: 9.35rem;
        margin-bottom: 0.2rem;
        display: flex;
        flex-direction: column;
    }
    .map h3{
        line-height: 2.4;
        padding: 0 0.5rem;
        margin: 0;
        font-size: 0.33rem;
        color: #fff;
        font-weight: 400;
    }
    .map .icon-cube{
        color: #fff;
    }
    .map .chart{
        flex: 1;
        background-color: rgba(255,255,255,0.05);
    }
    .map .geo{
        width: 100%;
        height: 100%;
    }
</style>